<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('设置必选')}`">{{ $t('设置必选') }}</t>
            <li>
                配置<span class="s-code">required</span>为<span class="s-code">true</span>，可以控制选择器必须选择数据行才可以点击确定
            </li>
            <li>
                配置<span class="s-code">searchConfig</span>可以启用列表查询模块，用法可以参照<span class="s-code">【Table】组件</span>
            </li>
        </template>
        <div style="width: 300px;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <p style="color: #666;">当前选择的是：{{ value && value.length ? value : '--' }}</p>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'table',
            required: true,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                { name: '张三', code: '001', id: '1' },
                { name: '李四', code: '002', id: '2' },
                { name: '王五', code: '003', id: '3' },
                { name: '奔跑的提款机', code: '666', id: '4' },
                { name: '前端爱好者', code: '004', id: '5' },
                { name: '菜鸟', code: '005', id: '6' },
                { name: '旗鼓相当的对手', code: '006', id: '7' },
            ],
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>当前选择的是：{{ value && value.length ? value : '--' }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'table',
            required: true,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                { name: '张三', code: '001', id: '1' },
                { name: '李四', code: '002', id: '2' },
                { name: '王五', code: '003', id: '3' },
                { name: '奔跑的提款机', code: '666', id: '4' },
                { name: '前端爱好者', code: '004', id: '5' },
                { name: '菜鸟', code: '005', id: '6' },
                { name: '旗鼓相当的对手', code: '006', id: '7' },
            ],
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
